<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>二级菜单</title>
        <script src="./toot/tool.js" async></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
                
            }
            a,
            img {
                border: 0;
                text-decoration: none;
            }

            body {
                font: 12px/180% Arial, Helvetica, sans-serif;
            }

            div.sdmenu {
                width: 9.375rem;
                margin: 0 auto;
                font-family: "arial, helvetica, sans-serif";
                font-size: 0.75rem;
                padding-bottom: 0.625rem;
                background-color: #647c9d;
                color: #ffffff;
                border-radius: 0.625rem;
            }

            div.sdmenu div {
                background-color: #647c9d;
                overflow: hidden;
            }

            /* div.sdmenu div:first-child {
      } */
            div.sdmenu div.collapsed {
                height: 1.6rem;
            }

            div.sdmenu div span {
                display: block;
                height: 0.9375rem;
                line-height: 0.9375rem;
                overflow: hidden;
                padding: 0.3125rem 1.5625rem;
                font-weight: bold;
                color: white;
                cursor: pointer;
                border-bottom: 1px solid #9488c2;
            }

            div.sdmenu div a {
                display: block;
                border-bottom: 1px solid #e4e4e4;
                padding: 0.3125rem;
                color: #576b95;
                background-color: #f5f5f5;
            }

            div.sdmenu div a:hover {
                background-color: #656a75;
                color: #ffffff;
            }

            #my_menu {
                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <div id="my_menu" class="sdmenu">
            <div>
                <span class="menuSpan">在线工具</span>
                <a href="#">图像优化</a>
                <a href="#">收藏夹图标生成</a>
                <a href="#">邮件</a>
                <a href="#">htaccess密码</a>
                <a href="#">梯度图像</a>
                <a href="#">按钮生成器</a>
            </div>
            <div class="collapsed">
                <span class="menuSpan">支持我们</span>
                <a href="#">推荐我们</a>
                <a href="#">链接我们</a>
                <a href="#">网络资源</a>
            </div>
            <div class="collapsed">
                <span class="menuSpan">合作伙伴</span>
                <a href="#">工具包</a>
                <a href="#">css驱动</a>
                <a href="#">css例子</a>
            </div>
            <div class="collapsed">
                <span class="menuSpan">测试电流</span>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var sapnLeard = document.querySelectorAll("div span.menuSpan");
        var defExpend = sapnLeard[0].parentNode;
        for (let i = 0; i < sapnLeard.length; i++) {
            sapnLeard[i].onclick = function () {
                // 获取span父节点div对象
                var parent = this.parentNode;
                toggleMeau(parent);
                // 判断点击对象不是默认展开的对象
                if (defExpend != parent && !hasClass(defExpend, "collapsed")) {
                    // 隐藏其他已展开的菜单
                    toggleMeau(defExpend);
                }
                // 获取新展开的菜单对象
                defExpend = parent;
            };
        }

        function toggleMeau(obj) {
            // 获取变化前的高度
            var begin = obj.offsetHeight;
            // 定义样式点击span后，父节点div可以切换样式，实现隐藏和显示；
            toggleClass(obj, "collapsed");
            // 获取变化后的高度
            var end = obj.offsetHeight;
            // 重置高度，变回初始高度后，通过动画来实现高度的自动伸缩
            obj.style.height = begin + "px";
            // 调用动画方法
            move(obj, "height", begin, end, 10, function () {
                obj.style.height = "";
            });
        }
    </script>
</html>
